import { fileURLToPath } from "node:url";
import { dirname } from "node:path";
import type { Config } from "tailwindcss";
import TailwindTypography from "@tailwindcss/typography";
import TailwindcssAnimate from "tailwindcss-animate";
import VidStack from "vidstack/tailwind.cjs";

const srcDir = process.cwd();
// console.log("srcDir", srcDir);
export default <Partial<Config>>{
  darkMode: "class",
  future: {
    hoverOnlyWhenSupported: true,
  },
  theme: {
    screens: {
      sm: "640px",
      // @media (min-width: 640px) { ... }
      md: "768px", // 48em
      lg: "960px", // 60em
      xl: "1440px", // 90em
      lap: "1690px", // 120em
    },
    extend: {
      // spacing: {
      //   "128": "32rem",
      //   "144": "36rem",
      // },
      fontFamily: {
        sans: ["Graphik", "sans-serif"],
        serif: ["Merriweather", "serif"],
      },
      aspectRatio: {
        auto: "auto",
        square: "1 / 1",
        video: "16 / 9",
      },
      // For vidStack
      colors: {
        "media-brand": "rgb(var(--media-brand) / <alpha-value>)",
        "media-focus": "rgb(var(--media-focus) / <alpha-value>)",
      },
    },
  },
  plugins: [
    TailwindTypography,
    // For vidStack
    TailwindcssAnimate,
    customVariants,
    VidStack({
      prefix: "media",
      webComponents: true,
    }),
  ],
  content: [
    `${srcDir}/components/**/*.{vue,ts}`,
    `${srcDir}/layouts/**/*.vue`,
    `${srcDir}/pages/**/*.vue`,
    // `${srcDir}/composables/**/*.{ts}`,
    // `${srcDir}/plugins/**/*.{ts}`,
    // `${srcDir}/utils/**/*.{ts}`,
    `${srcDir}/App.{ts,vue}`,
    `${srcDir}/app.{ts,vue}`,
    `${srcDir}/error.vue`,
    `${srcDir}/app.config.ts`,
  ],
};
function customVariants({
  addVariant,
  matchVariant,
}: {
  addVariant: AnyFunction
  matchVariant: AnyFunction
}) {
  // Strict version of `.group` to help with nesting.
  matchVariant("parent-data", (value: string) => `.parent[data-${value}] > &`);

  addVariant("hocus", ["&:hover", "&:focus-visible"]);
  addVariant("group-hocus", [".group:hover &", ".group:focus-visible &"]);
}
